<template>
  <view class="categroy">
    <view class="categroy-search">
      <view class="categroy-search-box">
        <image
          class="img"
          :src="imageUrl + '/static/home/search.png'"
          mode="widthFix"
        ></image>
        <input
          class="text"
          type="text"
          v-model="keyword"
          placeholder="请输入商品名称搜索"
          style="font-size: 26rpx"
        />
      </view>
      <view class="categroy-search-btn">搜索</view>
    </view>
    <view class="categroy-content">
      <view class="categroy-content-left">
        <view
          class="categroy-content-left-item"
          :class="key == item.value ? 'active' : ''"
          v-for="item in cateType"
          :key="item"
          @click="clickType(item.value)"
        >
          <view>{{ item.name }}</view>
        </view>
      </view>
      <scroll-view
        scroll-y
        class="categroy-content-right"
        @scrolltolower="scrolltolower"
      >
        <goods-list
          :fontSize="'22rpx'"
          :background="'#f7f7f7'"
          :list="catelist"
          @goDetail="goDetail"
        ></goods-list>
      </scroll-view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      keyword: "",
      imageUrl: "",
      key: 1,
      catelist: [
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 1,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 2,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop2.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 3,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 4,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop2.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 5,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
      ],
      cateType: [
        {
          name: "生活超市",
          value: "1",
        },
        {
          name: "美妆护理",
          value: "2",
        },
        {
          name: "奥特莱斯",
          value: "3",
        },
        {
          name: "腕表首饰",
          value: "4",
        },
        {
          name: "手机电脑",
          value: "5",
        },
        {
          name: "家用电器",
          value: "6",
        },
        {
          name: "家政服务",
          value: "7",
        },
        {
          name: "家居装修",
          value: "8",
        },
        {
          name: "家庭教育",
          value: "9",
        },
        {
          name: "家庭医疗",
          value: "10",
        },
      ],
    };
  },
  mounted() {},

  methods: {
    scrolltolower() {
      console.log("到底了");
    },
    clickType(value) {
      this.key = value;
    },
    goDetail(id) {
      uni.navigateTo({
        url: "/subpack/shopDetail/shopDetail?id=" + id,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.categroy {
  background: #f7f7f7;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .categroy-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    .categroy-search-box {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 36rpx;
      padding: 16rpx 20rpx;
      width: 80%;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin: 0 20rpx 0 10rpx;
      }
    }
  }
  .categroy-content {
    flex: 1;
    display: flex;
    &-left {
      width: 26%;
      height: 100%;
      overflow: auto;
      background: #f7f7f7;
      .categroy-content-left-item {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 30rpx;
      }
      .active {
        background: #fff;
        color: #de4846;
        position: relative;
      }
      .active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 40rpx;
        background: #de4846;
      }
    }
    &-right {
      flex: 1;
      height: calc(100vh - 120rpx);
      overflow: auto;
      background: #fff;
      padding: 0 20rpx;
      box-sizing: border-box;
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>